<template>
<div ref="playerContainer" id="player-container"></div>
</template>

<script>
import Clappr from 'clappr';


export default {
  name: 'video-player',
  props: {
    videoUrl: String,
    posterUrl: String,
    width: Number,
    height: Number
  },
  data() {
    return {
      player: null,
    };
  },
  mounted() {
    const { width, height, videoUrl, posterUrl } = this;
    const playerProps = {};

    if (width)
      playerProps.width = width;

    if (height)
      playerProps.height = height;


    this.player = new Clappr.Player({
      source: videoUrl,
      parentId: "#player-container",
      poster: posterUrl,
      ...playerProps
    });
  },
  beforeDestroy() {
    if (this.player) {
      this.player.destroy();
    }
  },
};
</script>

<style scoped>
@import url('https://cdn.jsdelivr.net/npm/clappr@0.3.21/dist/clappr.min.css');
/* 自定义样式 */
</style>